<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>CSS Example</title>
		<link rel="stylesheet" type="text/css" href="css_example.css" />
	</head>
	<body>
		<h1>Basic CSS Font Properties</h1>
		<p>The following table shows you the basic CSS font properties that allow
			you to change the appearance of text in your documents.</p>
		<table>
			<tr>
				<th>Property</th>
				<th>Purpose</th>
			</tr>
			<tr>
				<td class="code">font-family</td>
				<td>Specifies the font used.</td>
			</tr>
			<tr>
				<td class="code">font-size</td>
				<td>Specifies the size of the font used.</td>
			</tr>
			<tr>
				<td class="code">font-style</td>
				<td>Specifies whether the font should be normal, italic or oblique.</td>
			</tr>
			<tr>
				<td class="code">font-weight</td>
				<td>Specifies whether the font should be normal, bold, bolder, or lighter.</td>
			</tr>
		</table>
		
		<hr />
		<h1>Font Properties, Size, Weight, Style and variant</h1>
		<p class="one">Here is some text in a sana-serif font.</p>
		<p class="two">Here is some text in a serif font.</p>
		<p class="three">Here is some text in a monospaced font.</p>
		<p class="four">Here is some text in a 10% font-size.</p>
		<p>Here is <span class="five">some text in a small-caps font-variant.</span></p>
	
		<hr />
		<h1>Text color and text-align</h1>
		<p class="six">Here is some text with a color.</p>
		<p class="seven">Here is some text in justify.</p>
		<div class="box1">There is clearly a need for CSS to be taken seriously by graphic
			artists. The Zen Garden aims to excite, inspire, and encourage participation.
			To begin, view some of the existing designs in the list. Clicking on any one 
			will load the style sheet into this very page. The code remains the same, the
			only thing that has changed is the external.css file. Yes, really</div>
		<div class="box2">There is clearly a need for CSS to be taken seriously by graphic
			artists. The Zen Garden aims to excite, inspire, and encourage participation.
			To begin, view some of the existing designs in the list. Clicking on any one 
			will load the style sheet into this very page. The code remains the same, the
			only thing that has changed is the external.css file. Yes, really</div>
		<hr />
		<h1>Text vertical-align</h1>
		<p>Here is some text with vertical-align, like 2<span class="eight">nd</span>.</p>
		<p>But I think the best way to show is 2<sub>nd</sub>.</p>
		<hr />
		<h1>Text-decoration</h1>
		<p class="decoration1">This text should be underlined.</p>
		<p class="decoration2">This text should have a line over it.</p>
		<p class="decoration3">This text should have a line through it.</p>
		<p class="decoration4">This text should be blinking.</p>
		<hr />
		<h1>Text-indent</h1>
		<p>This paragraph should be aligned with the left-hand side of the browser window.</p>
		<p class="indent">Just the first line of this paragraph should be indented by 3 em,
			this should not apply to any subsequent lines in the same paragraph.</p>
		<hr />
		<h1>Drop-shadow</h1>
		<p class="dropshadow">This headling should have a drop shadow.</p>
		<hr />
		<h1>Text-transform</h1>
		<p class="none">This text has not been transformed.</p>
		<p class="capitalize">The first letter of each word will be capitalized.</p>
		<p class="uppercase">All of this text will be uppercase.</p>
		<p class="lowercase">ALL OF THIS TEXT WILL BE LOWERCASE.</p>
		<hr />
		<h1>Letter-spacing</h1>
		<p>This is normal spacing.</p>
		<p class="ls01">Here 2 pixels have been added between each letter.</p>
		<p class="ls02">Here 0.5 em has been added between each letter.</p>
		<p class="ls03">Here 1 pixel has been removed between each letter.</p>
		<hr />
		<h1>Word-spacing</h1>
		<p>There is a standard gap between each word.</p>
		<p class="ws01">There is a 20 pixel gap between each word.</p>
		<p class="ws02">There is a -1 pixel gap between each word.</p>
		<hr />
		<h1>White-space and Direction</h1>
		<p>Here is some text inside a paragraph designed to test the white-space property of CSS.</p>
		<p class="pre">Here
  is
	some
		 text inside a paragraph designed to test the white-space property of
			C 	S 	S.</p>
		<p class="nowrap">Here is some text inside a paragraph designed to test the white-space property of CSS. Here is some text inside a paragraph designed to test the white-space property of CSS. Here is some text inside a paragraph designed to test the white-space property of CSS.</p>
		<p class="ltr">This text should flow left to right.</p>
		<p class="rtl">This text should flow right to left.</p>
		<hr />
		<h1>Text First-letter and First-line</h1>
		<p class="introduction">Once upon a time, there was a pseudo-class that allowed you to specify a different rule for the first
			letter of an element's content, and another that allowed you to specify a different rule for the 
			whole of the first line. This example demonstrates the first-letter pseudo-classes</p>
	</body>
</html>
